<template>
  <div class="mybody">
    <div v-if="isJump">
      <el-row :gutter="10">
        <el-col :span="4">
          <div class="grid-content bg-white">
            <a @click="jumpToNext('/yjbb')">
              <div class="mainBox">
                <svg-icon icon-class="yjbb" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">油井班报</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">
            <a @click="jumpToNext('/sjbb')">
              <div class="mainBox">
                <svg-icon icon-class="sjbb" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">水井班报</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">
            <a @click="jumpToNext('/trqsj')">
              <div class="mainBox">
                <svg-icon icon-class="trqsj" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">天然气数据</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">
            <a @click="jumpToNext('/yjclyxsj')">
              <div class="mainBox">
                <svg-icon icon-class="yjclyxsj" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">油井产量运行数据</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">
            <a @click="jumpToNext('/sjclyxsj')">
              <div class="mainBox">
                <svg-icon icon-class="sjclyxsj" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">水井产量运行数据</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">
            <a @click="jumpToNext('/ysjzyk')">
              <div class="mainBox">
                <svg-icon icon-class="ysjzyk" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">油水井作业情况</div>
              </div>
            </a>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="4">
          <div class="grid-content bg-white">
            <a @click="jumpToNext('/zzzsj')">
              <div class="mainBox">
                <svg-icon icon-class="zzzsj" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">中转站数据</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">
            <a @click="jumpToNext('/scdtsj')">
              <div class="mainBox">
                <svg-icon icon-class="scdtsj" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">生产动态数据</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">

            <a @click="jumpToNext('/cysj')">
              <div class="mainBox">
                <svg-icon icon-class="cysj" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">储运数据</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">

            <a @click="jumpToNext('/syjtjb')">
              <div class="mainBox">
                <svg-icon icon-class="syjtjb" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">水源井统计表</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">

            <a @click="jumpToNext('/yslytydysyb')">
              <div class="mainBox">
                <svg-icon icon-class="yslytydysyb" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">榆树林油田月度用水月报</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">

            <a @click="jumpToNext('/cyjbyjh')">
              <div class="mainBox">
                <svg-icon icon-class="cyjbyjh" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">抽油机保养计划</div>
              </div>
            </a>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="4">
          <div class="grid-content bg-white">

            <a @click="jumpToNext('/ysbsbbyjh')">
              <div class="mainBox">
                <svg-icon icon-class="ysbsbbyjh" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">油水泵设备保养计划</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">

            <a @click="jumpToNext('/znsbssjcjl')">
              <div class="mainBox">
                <svg-icon icon-class="znsbssjcjl" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">站内设备设施检查记录</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">

            <a @click="jumpToNext('/znyjtz')">
              <div class="mainBox">
                <svg-icon icon-class="znyjtz" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">站内药剂台账</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">

            <a @click="jumpToNext('/sljxjjl')">
              <div class="mainBox">
                <svg-icon icon-class="sljxjjl" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">四类井巡检记录</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">

            <a @click="jumpToNext('/zyzzhrbb')">
              <div class="mainBox">
                <svg-icon icon-class="zyzzhrbb" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">转油站综合日报表</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">

            <a @click="jumpToNext('/sljtz')">
              <div class="mainBox">
                <svg-icon icon-class="sljtz" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">四类井台账</div>
              </div>
            </a>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="10">
        <el-col :span="4">
          <div class="grid-content bg-white">

            <a @click="jumpToNext('/fdfxtrb')">
              <div class="mainBox">
                <svg-icon icon-class="fdfxtrb" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">分队分系统日报</div>
              </div>
            </a>
          </div>
        </el-col>
        <el-col :span="4">
          <div class="grid-content bg-white">

            <a @click="jumpToNext('/yslytrydlqkb')">
              <div class="mainBox">
                <svg-icon icon-class="yslytrydlqkb" class="myIcon" />
                <div class="myIndex"></div>
                <div class="myRouteName">榆树林油田日用电量情况表</div>
              </div>
            </a>
          </div>
        </el-col>
      </el-row>
    </div>
    <div v-else>
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      // 是否已经跳转到子页面
      isJump: false,
      nowRoute: '',
    };
  },
  watch: {
    '$route': {
      immediate: true,
      deep: true,
      handler(val) {
        // console.log(this.$route.path);
        this.nowRoute = this.$route.path
        if (this.$route.path == '/sjtb/scgl') {
          //如果没有跳转到子页面，则展示选择界面
          this.isJump = true
        } else {
          this.isJump = false

        }
      }
    }

  },
  computed: {
    keepAlive() {
      return this.$route.path;
    }
  },
  methods: {
    jumpToNext(val) {
      const newVal = '/sjtb/scgl' + val
      // console.log(newVal);
      this.$router.push(newVal)
    }
  }
};
</script>
<style lang="scss" scoped>
// 主div样式
.mybody {
  padding: 16px;
  background: #F0F2F5;
}

// 按钮分割的样式
.el-row {
  margin-bottom: 10px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-white {
  background: #ffffff;
}

.grid-content {
  border-radius: 4px;
  min-height: 100px;
  max-height: 25%;
}

//每个单元格的样式
.mainBox {
  display: flex;
  justify-content: center;
  align-items: center;

  .myIcon {
    width: 30%;
    height: 20%;
    padding-left: 8%;
  }

  .myIndex {
    flex: 1;
  }

  .myRouteName {
    width: 65%;
    font-size: large;
    padding-right: 8%;
    text-align: right;
  }
}</style>
